<template xmlns="http://www.w3.org/1999/html">

<div>
  <el-form ref="form" :inline="true" :model="form" label-width="80px">
    <el-form-item  label="车辆名称:">
      <el-input v-model="form.name" placeholder="请输入司机名称" clearable></el-input>
    </el-form-item>

    <el-form-item  label="所属车队:">
    <el-select v-model="form.fleetname" placeholder="请选择">
      <el-option
        v-for="item in CarList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    </el-form-item>



    <el-row>
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-button
            type="danger" @click="getDataList">搜索
          </el-button>

        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple-light">
          <el-button @click="pickupresetdateform('form')">重置</el-button>
        </div>
      </el-col>
    </el-row>




  </el-form>

  <el-table :data="dataList"
            stripe
            style="width: 100%">
    <el-table-column
      prop="id"
      label="司机编号">
    </el-table-column>
    <el-table-column
      prop="name"
      label="司机姓名">
    </el-table-column>
    <el-table-column
      prop="coreOrgname"
      label="所属机构">
    </el-table-column>
    <el-table-column
      prop="fleetname"
      label="所属车队">
    </el-table-column>
    <el-table-column
      fixed="right"
      header-align="center"
      align="center"
      width="150"
      label="操作">
      <template slot-scope="scope">

        <el-button type="text" size="small" @click="querybyId(scope.row.id)">查看详情</el-button>
        <el-button type="text" size="small" @click="deleteCars(scope.row.id)">编辑车队</el-button>
      </template>
    </el-table-column>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </el-table>

  <el-dialog custom-class="truckdetailswidth" title="查看详情" :visible.sync="truckdetailsVisible" :close-on-click-modal="false">

    <el-tabs @tab-click="handleClick" :tab-position="tabPosition" type="border-card">
      <el-tab-pane label="基本信息">
        <el-card>
          <h3>基本信息</h3>
          <el-form label-width="80px" id="carform">
            <el-row>
              <el-form-item class="el-col-7" prop="userId" label="员工编号">
                <el-input size="12px" disabled id="userId" v-model="dataCarForm.userId" placeholder="员工编号"
                          clearable></el-input>
              </el-form-item>
              <el-form-item class="el-col-7 el-col-offset-1" prop="fleetname" label="司机名称">
                <el-input size="12px" disabled id="fleetname" v-model="dataCarForm.fleetname" placeholder="司机名称" clearable></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item class="el-col-7" prop="coreOrgname" label="所属机构">
                <el-input size="12px" disabled id="coreOrgname" v-model="dataCarForm.coreOrgname" placeholder="所属机构" clearable></el-input>
              </el-form-item>
              <el-form-item class="el-col-7 el-col-offset-1" prop="fleetId" label="所属车队">
                <el-input size="12px" disabled id="fleetId" v-model="dataCarForm.fleetId" placeholder="所属车队" clearable></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item class="el-col-7" prop="phone" label="电话">
                <el-input size="12px" disabled id="phone" v-model="dataCarForm.phone" placeholder="电话" clearable></el-input>
              </el-form-item>
              <el-form-item class="el-col-7 el-col-offset-1" prop="age" label="年龄">
                <el-input size="12px" disabled id="age" v-model="dataCarForm.age" placeholder="年龄" clearable>
                  <i slot="suffix" style="font-style:normal;margin-right: 10px;
                  line-height: 30px;">岁</i>
                </el-input>
              </el-form-item>
            </el-row>
          </el-form>
        </el-card>
        <el-row>
          <el-button @click="canceltruckbase()">取消</el-button>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="行驶证信息">
        <el-card>
          <h3>行驶证信息</h3>
          <el-form label-width="100px" id="lisenceform">
            <el-row>
              <el-form-item class="el-col-7" prop="licenseNumber" label="驾驶证号">
                <el-input size="12px" disabled id="licenseNumber" v-model="detaillicensedataForm.licenseNumber" placeholder="驾驶证号" clearable></el-input>
              </el-form-item>
              <el-form-item class="el-col-7 el-col-offset-1" prop="allowableType" label="准驾车型">
                <el-input size="12px" disabled id="allowableType" v-model="detaillicensedataForm.allowableType" placeholder="准驾车型" clearable></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item class="el-col-7" prop="initialCertificateDate" label="初次领证日期">
                <el-input size="12px" disabled id="initialCertificateDate" v-model="detaillicensedataForm.initialCertificateDate" placeholder="初次领证日期" clearable></el-input>
              </el-form-item>
              <el-form-item class="el-col-7 el-col-offset-1" prop="validPeriod" label="驾证有效期限">
                <el-input size="12px" disabled id="validPeriod" v-model="detaillicensedataForm.validPeriod" placeholder="驾证有效期限" clearable>
                  <i slot="suffix" style="font-style:normal;margin-right: 10px;
                  line-height: 30px;">年</i>
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item class="el-col-7" prop="driverAge" label="驾龄">
                <el-input size="12px" disabled id="driverAge" v-model="detaillicensedataForm.driverAge" placeholder="驾龄" clearable> <i slot="suffix" style="font-style:normal;margin-right: 10px;
                  line-height: 30px;">年</i></el-input>
              </el-form-item>
              <el-form-item class="el-col-7 el-col-offset-1" prop="licenseType" label="驾驶证类型">
                <el-input size="12px" disabled id="licenseType" v-model="detaillicensedataForm.licenseType" placeholder="驾驶证类型" clearable>
                  <i slot="suffix" style="font-style:normal;margin-right: 10px; line-height: 30px;">方</i>
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item class="el-col-7" prop="qualificationCertificate" label="从业资格证">
                <el-input size="12px" disabled id="qualificationCertificate" v-model="detaillicensedataForm.qualificationCertificate" placeholder="从业资格证" clearable>
                </el-input>
              </el-form-item>
              <el-form-item class="el-col-7 el-col-offset-1" prop="passCertificate" label="入场证信息">
                <el-input size="12px" disabled id="passCertificate" v-model="detaillicensedataForm.passCertificate" placeholder="入场证信息" clearable></el-input>
              </el-form-item>
            </el-row>
          </el-form>
        </el-card>

        <el-row>
          <el-button @click="cancellicensebase()">取消</el-button>
        </el-row>
      </el-tab-pane>
<!--      <el-tab-pane label="车次信息">-->
<!--        <el-card>-->
<!--          <h3>车次信息</h3>-->
<!--          <el-form id="tripsinfo" label-width="80px">
            <el-row>
              <el-form-item class="el-col-7" prop="tripsransportLine" label="所属线路">
                <el-input size="12px" disabled id="tripsransportLine" v-model="detailtripsdataForm.tripsransportLine" placeholder="所属线路" clearable></el-input>
              </el-form-item>
              <el-form-item class="el-col-7 el-col-offset-1" prop="tripsname" label="所属车次">
                <el-input size="12px" disabled id="tripsname" v-model="detailtripsdataForm.tripsname" placeholder="所属车次" clearable></el-input>
              </el-form-item>
            </el-row>
          </el-form>-->
<!--        </el-card>-->
<!--      </el-tab-pane>-->

    </el-tabs>


    <div slot="footer" class="dialog-footer">
      <el-button @click="truckdetailsVisible = false">取消</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
import {gettruckdetails} from '../../../api/base'

export default {
  name: 'driver',

  methods:{
    handleClick(tab, event) {
      console.log(tab, event);
    },

    pickupresetdateform() {
      this.form.name='',
        this.form.fleetname=[],
      this.getDataList();
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },

    //查询下拉冽表
    queryGoodList() {
      this.$http({
        url: this.$http.adornUrl('/base/fleet/findfleetAll'),
        method: 'get',
        params: this.$http.adornParams()

      }).then(res => {
        this.CarList = res.data
      })
    },


    //查询表单数据
    getDataList() {
      let params = {
        'page': this.pageIndex,
        'limit': this.pageSize,
        'name':this.form.name,
        'fleetId':this.form.fleetname

      }
      this.$http({
        url: this.$http.adornUrl('/base/truckdriver/querytruckDriverfy'),
        method: 'get',
        params: this.$http.adornParams(params)
      }).then(res => {
        this.dataList = res.data.rows
      })

    },
    querybyId(id){
      this.truckdetailsVisible = true;

      this.$http({
        url: this.$http.adornUrl('/base/truckdriver/getcarinfobyid/'+id),
        method: 'get',
      }).then(({data}) => {
        this.dataCarForm.userId = data.car.userId;
        this.dataCarForm.fleetname = data.car.fleetname;
        this.dataCarForm.coreOrgname = data.car.coreOrgname;
        this.dataCarForm.fleetname = data.car.fleetname;
        this.dataCarForm.phone= data.car.phone;
        this.dataCarForm.age = data.car.age;


        this.detaillicensedataForm.licenseNumber = data.license.licenseNumber;
        this.detaillicensedataForm.allowableType = data.license.allowableType;
        this.detaillicensedataForm.initialCertificateDate = data.license.initialCertificateDate;
        this.detaillicensedataForm.validPeriod = data.license.validPeriod;
        this.detaillicensedataForm.driverAge = data.license.driverAge;
        this.detaillicensedataForm.licenseType = data.license.licenseType;
        this.detaillicensedataForm.qualificationCertificate = data.license.qualificationCertificate;
        this.detaillicensedataForm.passCertificate = data.license.passCertificate;


       /*  this.detailtripsdataForm.tripsransportLine = data.truck.tripstruckNumber;
        this.detailtripsdataForm.tripsname = data.truck.tripsname; */

      })
    },
  },
  mounted() {
    this.getDataList()
    this.queryGoodList()
  },

  data(){
    return{

      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,

      CarList:[],
      dataList:[],
      tabPosition: "left",
      truckdetailsVisible:false,
      form:{
        name:'',
        fleetname:[]

      },
      dataCarForm: {
        userId: '',
        name: '',
        coreOrgname: '',
        fleetname: '',
        phone: '',
        age: '',

      },
      detaillicensedataForm: {
        id: '',
        engineNumber: '',
        registrationDate: '',
        mandatoryScrap: '',
        overallQuality: '',
        expirationDate: '',
        allowableWeight: '',
        validityPeriod: '',
        transportCertificateNumber: '',
      },
      detailtripsdataForm:{
        tripsransportLine: '',
        tripsname: '',
      },

      dataForm: {
        id:'',
        userId:'',
        name:'',
        fleetId:'',
        fleetnamev:'',
        coreOrgname:'',
        age:'',
        picture:'',
        drivingAge:'',
      }
    }
  }


}
</script>

<style scoped>

</style>
